<script setup>
    import { getAgriculturalDetails, getAgriculturalEdit } from '@/api/home'

    let form = $ref({})
    let dataLoading = $ref(false)
    let showDialog = $ref(false)
    let btnLoading = $ref(false)

    let params = [
        {
            name: '蔬菜',
            key: 'vegetableRatio'
        },
        {
            name: '小麦',
            key: 'wheatRatio'
        },
        {
            name: '玉米',
            key: 'maizeRatio'
        },
        {
            name: '棉花',
            key: 'cottonRatio'
        },
        {
            name: '油料',
            key: 'oilPlantsRatio'
        },
        {
            name: '其他',
            key: 'otherRatio'
        },
    ]

    const showProportionForm = () => {
        showDialog = true
        dataLoading = true
        getAgriculturalDetails().then(res => {
            dataLoading = false
            form = res.result
        })
    }

    // 保存
    const handleClickSave = () => {
        let { vegetableRatio, wheatRatio, maizeRatio, cottonRatio, oilPlantsRatio, otherRatio } = form
        
        let count = Number(vegetableRatio) + Number(wheatRatio) + Number(maizeRatio) + Number(cottonRatio) + Number(oilPlantsRatio) + Number(otherRatio)

        if(count != 100){
            ElMessage.error('占比总数不等于100~')
            return
        }

        btnLoading = true
        getAgriculturalEdit(form).then(res => {
            btnLoading = false
            if(res.success){
                ElMessage.success('提交成功~')
                showDialog = false
            }
        })
    }

    defineExpose({
        showProportionForm
    })


</script>

<template>
    <el-dialog
        width="562px"
        title="特色农产品占比编辑"
        v-model="showDialog"
        custom-class="form-dialog"
    >
        <div class="form-item" v-loading="dataLoading">

            <div 
                class="form-row"
                v-for="(item, index) in params"
                :key="index"
            >
                <div class="title">{{ item.name }}</div>
                <div class="input-wrap">
                    <el-input-number :controls="false" v-model="form[item.key]" />
                    <span class="label">%</span>
                </div>
            </div>

        </div>

        <div class="tips">*占比总数不得超过100%</div>

        <template #footer>
            <span class="dialog-footer flex-center">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button 
                    type="primary" 
                    @click="handleClickSave" 
                    :loading="btnLoading"
                >保存</el-button>
            </span>
        </template>
                
    </el-dialog>
</template>
